// 首页侧边栏
import React from 'react';
import { observer } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
import { useHistory } from 'react-router';
import { Layout, Menu } from 'antd';
import {
  FileTextFilled,
  UsbFilled,
  MobileFilled,
  DatabaseFilled,
  GoldFilled,
} from '@ant-design/icons';
import { layoutService } from '~/services/layout';
import './index.local.sass';

const { Sider } = Layout;


export const HomeSideMenu = observer((props: any) => {
  const { state, setCollapse } = layoutService;
  const { theme } = state;
  const history = useHistory();

  const handleClick = (e: any) => {
    if (props.doQuery) {
      props.doQuery(e.key);
    } else {
      history.push(`/login/more?key=${e.key as string}`);
    }
  };

  return (
    <Sider
      trigger={null}
      theme={theme}
      collapsible
      collapsed={state.collapsed}
      onCollapse={setCollapse}
    >
      <Link
        className={`logo-wrap flex items-center ${state.collapsed ? 'justify-center' : 'justify-start'}`}
        to="/login"
      >
        <img
          src="/logo.png"
          alt="logo"
          className={`logo ${state.collapsed ? '' : 'hidden'}`}
        />

        <img
          src="/logo_full.png"
          alt="logo_full"
          className={`logo_full ${state.collapsed ? 'hidden' : ''}`}
        />
      </Link>
      <Menu
        theme={theme}
        mode="inline"
        defaultSelectedKeys={[props.id ? props.id : '1']}
        onClick={handleClick}
      >
        <Menu.Item key="1">
          <FileTextFilled />
          <span>Member States Updates</span>
        </Menu.Item>
        <Menu.Item key="2">
          <UsbFilled />
          <span>International PPP news</span>
        </Menu.Item>
        <Menu.Item key="3">
          <MobileFilled />
          <span>policy & case study</span>
        </Menu.Item>
        <Menu.Item key="4">
          <DatabaseFilled />
          <span>International knowledge Sharing</span>
        </Menu.Item>
        <Menu.Item key="5">
          <GoldFilled />
          <span>Network Events</span>
        </Menu.Item>
      </Menu>
    </Sider>
  );
});
